<!DOCTYPE html>
<html>
<head>
	<meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
    <script src="//lib.sinaapp.com/js/jquery/1.12.4/jquery-1.12.4.min.js"></script> 
    <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>    
    <script src="/static/layer/layer/layer.js"></script>	
<link rel="stylesheet" href="/static/flatpickr/flatpickr.min.css">
<script src="/static/flatpickr/flatpickr.min.js"></script>
	
	<script src="https://cdn.staticfile.org/Chart.js/3.9.1/chart.js"></script>    
	<style>
		.card{width: 120px;margin: 10px;display:inline-grid;}
		#top,#bottom{
			height: 50px;
			width: 100%; 
			line-height: 50px;
			position: fixed;
			ackground-color: #f7f7f7;
			z-index: 20;}
		#top{border-bottom: 1px solid #ccc;top: 0;}
		#bottom{border-top: 1px solid #ccc;bottom: 0;}
		.card-body{padding: 2px;}
		.card:hover{border-color: #f60;box-shadow: 2px 2px 4px #f60;cursor: pointer;}
	</style>
</head>
<body >
	<div class="container-fluid">
	

	<div class="row" id="query_bar" style="height: 50px;line-height: 50px;">
	    <form action="" method="post">
	    <div class="col">
  		
        <label for="sdate">
            <input class="form-control" type="text" value="{$sdate}" id="sdate" name="sdate" placeholder="开始日期">
        </label>    
        <label for="edate">
            <input class="form-control" type="text" value="{$edate}" id="edate" name="edate" placeholder="结束日期">
        </label>

		<label for="group" >
        <select id="group" name="group" class="form-select">
        	<option value="" >按商品分组</option>
        	<option value="table_id" {if $group=="table_id"}selected {/if}>按台号分组</option>
        	<option value="creater" {if $group=="creater"}selected {/if}>按下单人分组</option>
        </select>
    	</label>

        <button type="submit" class="btn query" style="">
            <span class="bi-search"></span>
        </button>
        </div>
    </form>
    </div>

<canvas id="myChart" style="width:100%;height: 200px;"></canvas>

	<div id="content" style="text-align: left;">
		<table class="table table-sm table-hover table-striped">
			<tr>
				<th>No.</th>
				<th>商品名称</th>
				{if $group=='table_id'}<th>台号</th>{/if}
				{if $group=='creater'}<th>下单人</th>{/if}
				<th>销售数量</th>
				<th></th>
			</tr>
			{foreach $list as $k=>$g}
				<tr>
					<td class="goods_num"  style="display: none;">{$g['num']}</td>
					<td class="goods_name" style="display: none;">{$g['name']}</td>
				</tr>
				<tr>
					<td>{$k+1}</td>
					<td><img src="{$g['imgs']}" style="width:50px;" />{$g['name']}</td>
					{if $group=='table_id'}<td class="table_name">{$g['table_id_name']}</td>{/if}
					{if $group=='creater'}<td class="creater">{$g['creater_name']}</td>{/if}
					<td>{$g['num']}</td>
					<td><button class="btn btn-primary"><span class="bi-list-ul show_orders" gid="{$g['goods_id']}"></span></button></td>
				</tr>
	    	{/foreach}
				<tr>
					<td></td>
					{if $group!=''}<td></td>{/if}
					<td>总销售数</td>
					<td>{$num}</td>
					<td></td>
				</tr>

		 
		</table>
	</div>
	<div style="height:50px;"></div>


	<div id="orders" style="position: fixed;top: 0;border: 1px solid #ccc; background-color: #fff;z-index: 20;max-width: 800px;box-shadow: 2px 2px 10px #666;padding: 5px;display: none;overflow-y: scroll;max-height: 500px;">
		<c style="width:100px;position: absolute;top:0;">关联订单</c>
		<span class="bi-x-lg" style="float:right;"></span>
		<table class='table table-sm table-striped' style=""></table>
	</div>
	</div>



<script type="text/javascript">
	// 设置每个柱形图的背景颜色
    

	$(document).ready(function(){
		var labels =[];
		var vals = [];
		var ff=255;
		var backgroundColor = [];

		//准被标签
		$.each($(".goods_name"),function(){
			ff-=100;
			if(ff<1) ff=255;
			var sib_t = $(this).parent().next().find('.table_name').text();
			var sib_c = $(this).parent().next().find('.creater').text();
			console.log(sib_t);
			labels.push($(this).text()+"\r\n"+sib_t+sib_c);
			backgroundColor.push('rgba('+ff+',0,0,1)');
		})
		//准备数字
		$.each($(".goods_num"),function(){
			vals.push($(this).text());
		})		

		//console.log(backgroundColor);
		const ctx = document.getElementById('myChart');
		const data = {
		  labels: labels,
		  borderWidth: 1,     // 设置线条宽度
		  datasets: [{
		    label: '销量大比拼',
		    data: vals,//y轴数值
		    fill: false,
		    borderColor: 'rgb(75, 192, 192)', // 设置线的颜色
		    backgroundColor:backgroundColor,
		    tension: 0.1
		  }]
		};
		const config = {
		  type: 'bar', // 设置图表类型
		  data: data,
		  
		};
		const myChart = new Chart(ctx, config);


		$(".bi-x-lg").on('click',function(){$("#orders").hide();})


		$(".show_orders").on('click',function(e){
			var y = e.originalEvent.y;

			$("#orders").css({'top':(y*1+10)+"px"});

			var gid=$(this).attr('gid');
			var sdate=$("#sdate").val();
			var edate=$("#edate").val();

			$.ajax({
				url:'/index.php/goods/goods_orders',
				type:'post',
				data:{gid:gid,sdate:sdate,edate:edate},
				success:function(res){
					if(res.length){
						var	ords="<tr><td>订单流水</td><td>商品</td><td>金额</td><td>状态</td><td>下单人</td><td>下单时间</td></tr>";
						for(var i=0;i<res.length;i++){
							ords+="<td>"+res[i]['order_no']+"</td>";
							ords+="<td>"+res[i]['goods_list']+"</td>";
							ords+="<td>"+res[i]['price1']+"</td>";
							ords+="<td>"+res[i]['status_name']+"</td>";
							ords+="<td>"+res[i]['creater_name']+"</td>";
							ords+="<td>"+res[i]['create_time']+"</td></tr>";
						}

						$("#orders table").html(ords);
						$("#orders").show();

					}

				}
			})
		})


	    flatpickr("#sdate", {});
	    flatpickr("#edate", {});

	    $("#sdate").flatpickr({
	        enableTime: false,
	        dateFormat: "Y-m-d",
	    });
	    $("#edate").flatpickr({
	        enableTime: false,
	        dateFormat: "Y-m-d",
	    });

	});
</script>
</body>
</html>